<template>
  <div class="personal_login">
    <div class="login_header">
      <img src="@/assets/img/zhaopinLogo.png" alt />
    </div>
    <div class="login_box">
      <el-button class="message_log" ref="messageBtn" plain @click="msg_log">短信登录</el-button>
      <el-button class="password_log" plain @click="pwd_log">密码登录</el-button>
      <el-form :model="param" ref="login">
        <el-form-item>
          <div v-if="this.param.loginType===1">
            <el-input v-model="param.account" placeholder="手机号"></el-input>
            <slide_block></slide_block>
            <el-input v-model="param.smsCode" placeholder="短信验证码">
              <a slot="suffix" href="javaScript:;">发送验证码<span v-show='second'>({{second}})</span></a>
            </el-input>
          </div>
          <div v-else>
            <el-input v-model="param.account" placeholder="手机号"></el-input>
            <slide_block></slide_block>
            <el-input v-model="param.password" placeholder="密码"></el-input>
          </div>
        </el-form-item>
        <div class="agreement">
          <el-checkbox v-model="checked"></el-checkbox>
          <span>自动登录</span>
          <a class="fr" href>忘记密码？</a>
        </div>
        <el-form-item>
          <el-button class="submit_btn" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="to_reg">
        <span>没有樟树市人才服务账号？</span>
        <a href>立即注册</a>
      </div>
    </div>
  </div>
</template>

<script>
import slide_block from '@/components/common/slideBlock.vue';
import { fetchData } from '../../../api/index';
export default {
  name: 'personal_login',
  data () {
    return {
      checked: false,
      param: {
        account: '',
        password: '',
        captchaCode: '',
        captchaUUid: '',
        smsCode: '',
        loginType: 1
      }
    };
  },
  mounted () {
    this.$refs.messageBtn.$el.focus();
    console.log(this.$refs.messageBtn);
  },
  methods: {
    msg_log () {
      this.user.loginType = 1;
    },
    pwd_log () {
      this.user.loginType = 2;
    },
    onSubmit () {
      this.$refs.login.validate(valid => {
        if (valid) {
          fetchData(this.param).then(data => {
            console.log(data);
            this.$message.success('登录成功');
            localStorage.setItem('ms_username', this.param.account);
          });
          // this.$router.push('/');
        } else {
          this.$message.error('请输入账号和密码');
          console.log('error submit!!');
          return false;
        }
      });
      // this.$router.push({ path: '/home' });
    }
  },
  components: {
    slide_block
  }
};
</script>

<style lang="css">
.personal_login {
    width: 100%;
    height: 100%;
    background: rgba(246, 246, 248, 1);
    opacity: 1;
}
.personal_login .login_header {
    width: 100%;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.personal_login .login_header img {
    margin-left: 360px;
}
.personal_login .login_box {
    width: 424px;
    height: 523px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
    opacity: 1;
    border-radius: 8px;
    padding: 56px;
    margin: 181px auto 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.personal_login .login_box .message_log {
    font-size: 16px;
    width: 134px;
    height: 40px;
    opacity: 1;
}
.personal_login .login_box .password_log {
    font-size: 16px;
    width: 134px;
    height: 40px;
    margin-left: 44px;
    opacity: 1;
}
.personal_login div.el-input a {
    width: 70px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    margin-right: 18px;
}
.personal_login div.el-input a::before {
    vertical-align: top;
    display: inline-block;
    content: '';
    width: 0px;
    height: 26px;
    margin-top: 8px;
    margin-right: 10px;
    border: 1px solid rgba(246, 246, 248, 1);
    opacity: 1;
}
.personal_login .login_box .el-input {
    line-height: 40px;
    margin-top: 32px;
}
.personal_login .login_box .el-input .el-input__inner {
    height: 40px;
    line-height: 40px;
    border-radius: 0;
}
.personal_login .agreement {
    margin: 28px 0;
    line-height: 20px;
}
.personal_login .agreement .el-checkbox,
.personal_login .agreement .el-checkbox .el-checkbox__inner {
    margin-top: 3px;
    margin-right: 4px;
    width: 12px;
    height: 12px;
}
.personal_login .agreement span {
    width: 56px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(153, 153, 153, 1);
    opacity: 1;
}
.personal_login .agreement a {
    width: 70px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(153, 153, 153, 1);
    opacity: 1;
}
.personal_login .submit_btn {
    width: 312px;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    font-size: 14px;
}
.personal_login .to_reg {
    margin-top: 32px;
    width: 196px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    opacity: 1;
}
.personal_login .to_reg span {
    color: rgba(153, 153, 153, 1);
}
.personal_login .to_reg a {
    color: rgba(0, 147, 255, 1);
}
</style>